<template>

	<view class="content">
		<view class="title" style="margin-top: 200rpx;">有一个真实的头像</view>
		<view class="title">会让大家更想认识你!</view>

		<view class="avther-main" style="margin-top: 100rpx;" @click.stop="openAvatar">
			<image v-if="picUrl != ''" class="avther-image" :src="picUrl" mode=""></image>
		</view>
		<view class="des">请上传1张形象良好的正脸照片</view>
		<view class="des">保证照片像素清晰、五官可见</view>
		<view class="des">通过认证后、此照片将上传到你的相册</view>

		<zy-register-bottom @next='next'></zy-register-bottom>
	</view>
</template>

<script>
	import {
		ossUpload,
		getFileName
	} from '@/js_sdk/jason-alioss-upload/oss.js'
	import RouteUtil from '@/main/common/RouteUtil.js';
	import CacheUtil from '@/main/common/CacheUtil';
	export default {
		data() {
			return {
				picUrl: '',
				bucketName: '',
				objectKey: '',
				url_str: '',
				key: '',
				accessKeyId: '',
				accessKeySecret: '',
				securityToken: '',
				host: '',
				data: {},
			};
		},
		onLoad() {
			this.data = CacheUtil.getRegisterUser();
		},
		methods: {
			openAvatar() {
				const carmeraRegiter = CacheUtil.getCarmeraRegister();
				if (carmeraRegiter) {
					this.uploadOOS()
					return
				}
				uni.showModal({
					content: '拍照功能用于上传头像',
					success: res => {
						if (res.confirm) {
							CacheUtil.setCarmeraRegister()
							this.uploadOOS()
						}
					}
				})
			},
			uploadOOS() {
				uni.chooseImage({
					count: 1,
					crop: {
						width: 400,
						height: 400
					},
					success: async (file) => {
						let dir = 'userinfo'
						let fileName = getFileName(file.tempFilePaths[0]);
						const {
							success,
							data
						} = await ossUpload(file.tempFilePaths[0], fileName, dir)
						if (success) {
							this.requestFile(dir, fileName, data)
						}
					}
				});
			},
			requestFile(pathKey, fileNameKey, picUrl) {
				let params = {
					pathKey: pathKey,
					userIdKey: uni.getStorageSync('userId'),
					fileNameKey: fileNameKey
				}
				uni.$http.post('/api/ossSts/callBackFiInfo', params).then(res=>{
					this.data.headPicId = res.data;
					this.picUrl = picUrl
				})
			},
			next() {
				CacheUtil.setRegisterUser(this.data)
				RouteUtil.toRegister8()
			}
		}
	};
</script>

<style lang="scss">
	.content {
		width: 100wh;
		height: 100vh;
		margin: 0 50rpx;

		.title {
			font-weight: bold;
			font-size: 48rpx;
			color: #222;
		}

		.avther-main {
			width: 220rpx;
			height: 220rpx;
			border: 5rpx solid #222;
			border-radius: 50%;
			margin: 40rpx auto 40rpx;

			.avther-image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.des {
			width: 702rpx;
			font-size: 28rpx;
			color: #a9a9a9;
			line-height: 64rpx;
			text-align: center;
		}

	}
</style>